<template>
    <div class="mainApp u-flex_col">
        <div class="profileHead">
            <div class="itemPro" :class="{'cur':curItemNo==0}" @click="changeTab(0)">
                <div class="info">
                    <span class="itemName">我的照片</span>
                    <div class="state">
                    <span class="icon" v-if="ImgState === 1"></span><span :class="ImgState === 0 ? 'itemState':'hasState'"></span></div>
                </div>
            </div>
            <div class="itemPro" :class="{'cur':curItemNo==1}" @click="changeTab(1)">
                <div class="info">
                    <span class="itemName">个人简介</span>
                     <div class="state">
                    <span class="icon" v-if="IntroState === 1"></span><span :class="IntroState === 0 ? 'itemState':'hasState'"></span></div>
                </div>
            </div>
            <div class="itemPro" :class="{'cur':curItemNo==2}" @click="changeTab(2)">
                <div class="info">
                    <span class="itemName">我的理想</span>
                     <div class="state">
                    <span class="icon" v-if="IdeaState === 1"></span><span :class="IdeaState === 0 ? 'itemState':'hasState'"></span></div>
                </div>
            </div>
        </div>

        <div class="profileBody u-flex">
           <keep-alive> <component ref="itempage" :is='compPage' @update="getAllData"></component></keep-alive>
        </div>

        <div class="profileBtn">
            <div class="backHome" @click="returnHome">返回首页</div>
            <div class="submit" @click="submit">提交</div>
        </div>
        <van-dialog v-model="Dialogshow" title="提示" className="dialog" show-cancel-button confirmButtonColor="#168DFF" cancelButtonColor="#B6B8B8" @confirm="sureReturn">
           <div class="content"> 输入内容将失效，确认返回首页？</div>
        </van-dialog>
    </div>
</template>

<script>
import myphoto from './components/myphoto'
import prodetail from './components/prodetail'
import myideal from './components/myideal'
import {axGet} from '@/api/index'
import {getYAndM} from '@/utils/util'
export default {
    data(){
        return{
            curItemNo:0,
            compPage:'',
            Dialogshow:false,
            school:localStorage.getItem('school'),
            userid:localStorage.getItem('userid'),
            classCode:localStorage.getItem('classCode'),
            ImgState:0,
            IntroState:0,
            IdeaState:0
        }
    },
    components:{
        myphoto,prodetail,myideal
    },
    mounted(){
        this.compPage = 'myphoto'
        this.getAllData()
        // 如果支持 popstate 一般移动端都支持了
        if (window.history && window.history.pushState) {
            // 往历史记录里面添加一条新的当前页面的url
            history.pushState(null, null, document.URL);
            // 给 popstate 绑定一个方法 监听页面刷新
            window.addEventListener('popstate', this.returnHome, false);//false阻止默认事件
        }
    },
    destroyed(){
		window.removeEventListener('popstate', this.returnHome, false);//false阻止默认事件
	},
    methods:{
        submit(){
            this.$refs['itempage'].submit(this.compPage);
        },
        getAllData(){
            axGet('ChangQingGetGrowRecord',{
                school:this.school,
                userid:this.userid,

            }).then((res)=>{
                console.log('res',res)
                if(res.ResultCode === 1){
                    // this.allModuleData = res.Value
                    console.log('res.Value',this.$refs.itempage)
                    const data = res.Value
                    this.ImgState = (data.ImgInfo && data.ImgInfo.ImgState) ? data.ImgInfo.ImgState :0
                    this.IdeaState = (data.MyIdeaInfo &&  data.MyIdeaInfo.IdeaState) ?  data.MyIdeaInfo.IdeaState :0
                    this.IntroState = (data.IntroInfo &&  data.IntroInfo.IntroState) ? data.IntroInfo.IntroState :0
                    if(data.ImgInfo){
                        this.$refs.itempage.imgSrc =  data.ImgInfo.ImgUrl
                    }
                    if( this.compPage == 'prodetail' && data.IntroInfo){
                        this.$refs.itempage.name =  data.IntroInfo.IntroName ? data.IntroInfo.IntroName:localStorage.getItem('name')
                        // this.$refs.itempage.idcard =  data.IntroInfo.IntroIdCard ? data.IntroInfo.IntroIdCard:''
                        this.$refs.itempage.introsex =  data.IntroInfo.IntroSex ? data.IntroInfo.IntroSex:1
                        this.$refs.itempage.birthday =  data.IntroInfo.IntroBirthday ? data.IntroInfo.IntroBirthday:''
                        this.$refs.itempage.native =  data.IntroInfo.IntroNative ? data.IntroInfo.IntroNative:''
                        this.$refs.itempage.nation =  data.IntroInfo.IntroNation ? data.IntroInfo.IntroNation:''
                        this.$refs.itempage.yongPointeer =  data.IntroInfo.IntroYoungPioneer ? data.IntroInfo.IntroYoungPioneer:1
                        this.$refs.itempage.hobby =  data.IntroInfo.IntroHobby ? data.IntroInfo.IntroHobby:''
                        this.$refs.itempage.book =  data.IntroInfo.IntroBook ? data.IntroInfo.IntroBook:''
                        this.$refs.itempage.exices =  data.IntroInfo.IntroExercise ? data.IntroInfo.IntroExercise:''
                        this.$refs.itempage.ouxiang =  data.IntroInfo.IntroExample ? data.IntroInfo.IntroExample:''
                        this.$refs.itempage.intrest =  data.IntroInfo.IntroInterest ? data.IntroInfo.IntroInterest:''
                        this.$refs.itempage.currentDate = data.IntroInfo.IntroBirthday ? getYAndM(data.IntroInfo.IntroBirthday):new Date(2011,0)
                    }

                   if(this.compPage == 'myideal' && data.MyIdeaInfo){ 
                        this.$refs.itempage.MyIdea =  data.MyIdeaInfo.MyIdea ? data.MyIdeaInfo.MyIdea:''
                   } 
                    
                }
            })
        },
        changeTab(no){
            this.curItemNo = no;
            switch(no){
                case 0:
                    this.compPage = 'myphoto'
                    break;
                case 1:
                    this.compPage = 'prodetail'
                    break;
                case 2:
                    this.compPage = 'myideal'
                    break;
            }
            this.getAllData()
        },
        returnHome(){
            if(sessionStorage.getItem('hasChange1') ||  sessionStorage.getItem('hasChange2') || sessionStorage.getItem('hasChange3')){
                this.Dialogshow =true
                history.pushState(null, null, document.URL);
            }else{
                this.$router.push('/home')
            }
        },
        sureReturn(){
            sessionStorage.getItem('hasChange1') &&  sessionStorage.removeItem('hasChange1')
            sessionStorage.getItem('hasChange2') &&  sessionStorage.removeItem('hasChange2')
            sessionStorage.getItem('hasChange3') &&  sessionStorage.removeItem('hasChange3')
            this.$router.push('/home')
        }
       
        
    }
}
</script>

<style lang='scss' scoped>
 .dialog /deep/{
    //  width: 3.54rem;
        .van-dialog__header{
            color: #262627;
            font-size: .36rem;
            font-weight: 800;
            padding-top: .24rem;
        }
        .content{
            color: #262627;
            font-size: .32rem;
            text-align: center;
            height: 1.4rem;
            line-height: 1.4rem;
        }
    }
.profileHead{
    width: 100%;
    height: 2rem;
    padding: .2rem .28rem;
    .itemPro{
        width: 1.88rem;
        height: 1.52rem;
        border-radius: .16rem;
        background: #FFF;
        float: left;
        margin-right: .64rem;
        box-shadow: 0 .08rem .3rem rgba($color: #262727, $alpha: .15);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        &.cur{
            background: #168DFF;
            box-shadow: 0 .08rem .3rem rgba(38, 39, 39, 0.25);
            .info{
                color: #FFF;
            }
            .icon{
                display: inline-block;
                width: .2rem;
                height: .15rem;
                background: url('~@/assets/img//nav_icon.png') no-repeat;
                background-size: contain;
                margin-right: .1rem; 
            }
        }
        .info{
            width: 100%;
            color: #168DFF;
            text-align: center;
            .itemName{
                font-size: .32rem;
                padding: .05rem 0;
                display: block;
            }
            .itemState{
                font-size: .28rem;
                padding: .05rem 0;
                display: block;
            }
        }
    }
    .itemPro:last-child{
        margin-right: 0;
    }
    .state{
        display: flex;
        align-items: center;
        justify-content: center
    }
    .itemState::after{
       content: '未完成';
    }
    .hasState::after{
       content: '已完成';
    }
    .icon{
        display: inline-block;
        width: .2rem;
        height: .15rem;
        background: url('~@/assets/img//nav_icon_back.png') no-repeat;
        background-size: contain;
        margin-right: .1rem;
    }
    .cur{
        // .itemState::after{
        //     content: '未完成';
        // } 
        // .itemState ::before{
        //     background-image: url('~@/assets/img/nav_icon_back.png');
        // } 
    }
   
}


</style>